<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form :form="form" style="padding: 10px;">
                    <a-form-item style="display:none">
                        <a-input v-decorator="['msgId']"/>
                    </a-form-item>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.content','标题')">
                              <rx-input-i18n :placeholder="i18n('form.content','标题')"
                                             v-decorator="['i18nJson', {rules: [{required: true, message: i18n('form.content','标题','input')}]}]"
                              />
                            </a-form-item>
                        </a-col>

                    </a-row>
                    <a-row>
                        <a-col>
                            <rx-icon class="ins-app-rx-icon" @certainIcon="iconselect"
                                     :iconType="'custom'"
                                     :system="mdl.bgType"
                                     :bgColor="mdl.color"
                                     :icon.sync="mdl.icon">
                            </rx-icon>

                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.url','更多URL')">
                                <a-input :placeholder="i18n('form.url','更多URL')"
                                         v-decorator="['url', {rules: [{required: true, message: i18n('form.url','更多URL','input')}]}]"/>
                            </a-form-item>
                        </a-col>

                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <a-form-item :labelCol="labelCol1" :wrapper-col="wrapperCol1" :label="i18n('form.type','类型')">
                                <a-radio-group @change="sqlTypeChange" v-model="mdl.type"
                                               v-decorator="['type', {rules: [{required: true, message: i18n('form.type','类型','select')}]}]">
                                    <a-radio value="function">{{i18n('form.methodGroovy','调用方法（groovy语法）')}}</a-radio>
                                    <a-radio value="sql">GroovySQL</a-radio>
                                </a-radio-group>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row>
                        <a-col :span="24">
                            <div style="padding-top: 10px">
                                <a-form-item :labelCol="labelCol1" :wrapper-col="wrapperCol1"
                                             :label="isSql?i18n('form.sql','SQL语句'):i18n('form.methodDef','方法定义')">
                                    <div style="width: 100%;height: 200px;box-sizing: border-box;padding-right: 1px;">
                                        <rx-monaco-editor ref="monacoes"
                                                          :language="monacoeLanguage"
                                                          v-model="mdl.sqlFunc"
                                                         >
                                            <template v-slot:monacoeditor>
                                                <a-row v-show="isSql">
                                                    <a-col :span="12">
                                                        <a-form-item :labelCol="labelCol" :wrapper-col="{ span: 15 }" :label="i18n('form.dataSource','数据源')">
                                                            <a-input-group compact style="width: 100%">
                                                                <a-input v-model="mdlDsAlias" :placeholder="i18n('form.sourceName','数据源名称')" @change="changDsAlias"
                                                                         v-decorator="['dsAlias', {rules: [{required: false, message: i18n('form.sourceName','数据源名称','select')}]}]"
                                                                         style="width: 70%"/>
                                                                <a-button @click="openDataSource" style="width: 10%;min-width: 50px;">·&nbsp;·&nbsp;·</a-button>
                                                                <span v-show="dsAliasError" style="color: red">{{i18n('msa.dateSourceTips','请选择数据源！')}}</span>
                                                            </a-input-group>
                                                        </a-form-item>
                                                    </a-col>
                                                    <a-col :span="12">
                                                        <div  class="conditionDiv">
                                                            <div class="minDiv">
                                                                <a-form-item :labelCol="labelCol" :wrapper-col="{ span: 17 }" :label="$ti18('rxForm.constantVar','常量')">
                                                                    <a-select style="width: 200px;" :options="constantField"
                                                                              @change="sqlInsertChange"></a-select>
                                                                </a-form-item>
                                                            </div>
                                                        </div>
                                                    </a-col>
                                                </a-row>
                                            </template>

                                        </rx-monaco-editor>
                                    </div>
                                </a-form-item>
                            </div>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </rx-layout>


    </rx-dialog>
</template>
<script>
// v-decorator="['sqlFunc', {rules: [{required: false, message: '请填写SQL语句'}]}]"
import InsMsgDefApi from '@/api/portal/core/insMsgDef'
import {BaseForm, RxDialog, Dialog, RxMonacoEditor,JsConstant} from "@lowcode/jpaas-common-lib";
import ARow from "ant-design-vue/es/grid/Row";
import rxInputIcon from "@/components/rxComponent/rx-input-icon";
import RxIcon from "@/components/rxComponent/rx-icon";
export default {
    name: 'InsMsgDefEdit',
    mixins: [BaseForm],
    data() {
        return {
            isSql: false,
            dsAliasError: false,
            constantField: [{label: this.i18n('form.validConst','可用常量'), value: ''}],
            mdl:{
                icon: "",
                color:'linear-gradient(0deg,#2b76f3 0%,#6db6fb 100%)',
                bgType:'lineage'
            },
            sqlFunc: "",
            monacoeLanguage: "javascript",
            mdlDsAlias:""
        }
    },
    components: {
        ARow, Dialog,
        RxDialog, RxMonacoEditor,
        rxInputIcon,
        RxIcon
    },
    created() {
        this.loadConstants();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"InsMsgDef",key);
        },
        loadConstants() {
            InsMsgDefApi.getConstants().then(data => {
                this.constantField = this.constantField.concat(data.map(item => {
                    return {label: item.val, value: item.key}
                }));
            })
        },
        sqlInsertChange(value) {
            if (value) {
                this.$refs.monacoes.insertContent(value);
            }
        },
        changDsAlias() {
            this.dsAliasError = false;
        },
        validForm(values) {
            return true;
        },
        onload_(data) {
            if (!data || data.type== 'function') {
                let obj = data ? data : {}
                this.mdl = Object.assign(obj,{
                    type: "function"
                })
                this.form.setFieldsValue(this.mdl);
                return;
            }
            if ("sql" == data.type) {
                this.isSql = true;
                if (data.dsAlias) {
                    this.form.setFieldsValue({dsAlias: data.dsAlias});
                    this.mdlDsAlias=data.dsAlias;
                }
            }
        },
        sqlTypeChange(e) {
            var val = e.target.value;
            this.mdl.sqlFunc = "";
            if (val == "function") {
                this.isSql = false;
                this.mdl.dsAlias = "";
                this.mdlDsAlias="";
            } else {
                this.isSql = true;
            }
        },
        openDataSource() {
            Dialog.openDataSourceDialog({
                curVm: this, widthHeight: ['1200px', '600px'],
                data: {appName: JsConstant.JPAAS_LOWCODE}
            }, function (self, data) {
                self.form.setFieldsValue({dsAlias: data.alias});
                self.dsAliasError = false;
                self.mdlDsAlias=data.alias;
            })
        },
        iconselect(icon,color,system) {
            if(!icon){
                this.mdl.icon = '';
            }else{
                this.mdl.icon = icon ;
            }
            this.mdl.color = color ;
            this.mdl.bgType = system ;
        },
        setIcon (icon) {
            this.mdl.icon = icon.icon;
        },
        emitEmpty() {
            this.$refs.iconInput.focus()
            this.form.setFieldsValue({'icon': ''})
        },
        get(id) {
            return InsMsgDefApi.get(id);
        },
        save(values) {
            //新增时保存应用ID
            let appId = this.curApp.appId;
            if (appId && !this.pkId) {
                values.appId = appId;
            }
            values.color = this.mdl.color ;
            values.bgType = this.mdl.bgType ;
            values.icon=this.mdl.icon;
            if (!values.sqlFunc){
                values.sqlFunc=this.mdl.sqlFunc
            }
            return InsMsgDefApi.save(values);
        }

    }
}
</script>